<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css-clamp函数</title>
  </head>
  <style>
    /* 
    clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，
    在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 
    clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))
    */
    .app {
      width: 100%;
      height: 200px;
      border: 1px solid #f00;
    }
    .app .left {
      /* width: 30%; */
      /* width: clamp(300px, 40%, 500px); */
      width: max(300px, min(40%, 500px));
      height: 100%;
      border: 1px solid #000;
    }
  </style>
  <body>
    <div class="app">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>
